/**
 * Created by wangjz on 2018/12/05.
 */
import React, { Component } from 'react';
import { Input, Layout, Button, Table, Modal, message } from 'antd';
import '../less/index.less';
import { listApp, deleteApp, saveApp } from '../service';
import AppDialog from './AppDialog';
import { PlusOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons';

const { Content, Header } = Layout;
const confirm = Modal.confirm;

class Root extends Component {
  name = '';
  state = {
    appDialogParams: {
      loading: false,
      visible: false,
      title: '新增系统',
      editData: {},
    },
    sysList: [],
    loading: false,
  };

  componentDidMount = () => {
    this.listApp();
  };

  listApp = async () => {
    this.setState({ loading: true });
    try {
      let data = await listApp(this.name);
      this.setState({ loading: false, appList: data });
    } catch (e) {
      this.setState({ loading: false });
    }
  };

  onOpenAppDialog = editData => {
    this.setState({
      appDialogParams: {
        ...this.state.appDialogParams,
        editData: editData ? editData : {},
        visible: true,
      },
    });
  };

  onSearch = name => {
    this.name = name;
    this.listApp();
  };

  onDeleteApp = record => {
    let that = this;
    confirm({
      title: '确认删除这条记录吗？',
      async onOk() {
        await deleteApp(record.id);
        that.listApp();
      },
    });
  };

  onOk = async (data) => {
    await saveApp(data);
    this.listApp();
    this.onCancel();
    message.info('保存成功');
  };

  onCancel = () => {
    this.setState({ appDialogParams: { ...this.state.appDialogParams, visible: false } });
  };

  render() {

    const columns = [
      { title: '应用名称', dataIndex: 'name', key: 'name', width: 350 },
      { title: '前缀路径', dataIndex: 'prefixUrl', key: 'prefixUrl', width: 200 },
      { title: '应用描述', dataIndex: 'remark', key: 'remark', width: 350 },
      {
        title: '操作', width: 200, align: 'center', render: function(text, record) {
          let disabled = record.isFixed ? 'disabled' : null;
          return (<span>
              <Button title='修改' onClick={() => this.onOpenAppDialog(record)} size={'small'} type="ghost" shape="circle"
                      icon={<EditOutlined/>} disabled={disabled} style={{ marginRight: 4 }}/>
            <Button title='删除' onClick={e => this.onDeleteApp(record)} size={'small'} type="ghost"
                    shape="circle" icon={<CloseOutlined/>} disabled={disabled}/>
            </span>);
        }.bind(this),
      }];

    return (
      <Layout className='layout'>
        <Header className='header'>
          <Button type='primary' icon={<PlusOutlined/>} onClick={() => this.onOpenAppDialog()}>新增应用</Button>
          <div style={{ float: 'right', paddingBottom: 3, paddingRight: 10 }}>
            <Input.Search placeholder="应用名称" style={{ width: 200 }} onSearch={this.onSearch}/>
          </div>
        </Header>
        <Content className='content'>
          <Table rowKey="id" dataSource={this.state.appList} columns={columns} size='middle'
                 loading={this.state.loading}
                 pagination={false}/>
          <AppDialog params={this.state.appDialogParams} onOk={this.onOk}
                     onCancel={this.onCancel}/>
        </Content>
      </Layout>
    );
  }
}

export default Root;
